<template>
  <a-modal
    title="部门管理"
    :width="850"
    :visible="visible"
    :confirmLoading="confirmLoading"
    :destroyOnClose="true"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <a-alert
        v-if="alertVisable"
        showIcon
        banner
        message="保存部门信息失败,请检查部门信息是否填写正确"
        type="error"
        closable
        @close="alertOnClose"
      />
      <a-form :form="form">
        <a-row :gutter="24">
          <a-col :span="14">
            <!-- 部门编号 departCode -->
            <a-row>
              <a-col :span="24">
                <a-form-item
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                  label="部门编号"
                >
                  <a-input-search
                    placeholder="部门编号"
                    v-decorator="['departCode', {rules: [{ required: true, message: '部门编号' }]}]"
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <!-- 部门全称 departFullName -->
            <a-row :gutter="24">
              <a-col :span="24">
                <a-form-item
                  label="部门全称"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                >
                  <a-input v-decorator="['departFullName', {rules: [{ required: true, message: '部门全称不能为空' }]}]" />
                </a-form-item>
              </a-col>
            </a-row>
            <!-- 部门名称 departName -->
            <a-row :gutter="24">
              <a-col :span="24">
                <a-form-item
                  label="部门名称"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                >
                  <a-input v-decorator="['departName', {rules: [{ required: true, message: '部门名称不能为空' }]}]" />
                </a-form-item>
              </a-col>
            </a-row>
            <!-- 部门业务类型 classType -->
            <a-row :gutter="24">
              <a-col :span="24">
                <a-form-item
                  label="部门业务类型"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                >
                  <!-- <a-select :size="size" defaultValue="a1" style="width: 200px" @change="handleChange"> -->
                  <a-select v-decorator="['classType', {}]">
                    <a-select-option v-for="item in stateList" :value="item.key" :key="item.key">
                      {{ item.lable }}
                    </a-select-option>
                  </a-select>
                  <!-- <a-input v-decorator="['classType', {}]" /> -->
                </a-form-item>
              </a-col>
            </a-row>
            <!-- 部门职能类型 category -->
            <a-row :gutter="24">
              <a-col :span="24">
                <a-form-item
                  label="部门职能类型"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                >
                  <a-select v-decorator="['category', {}]">
                    <a-select-option v-for="item in stateList" :value="item.key" :key="item.key">
                      {{ item.lable }}
                    </a-select-option>
                  </a-select>
                  <!-- <a-input v-decorator="['category', {}]" /> -->
                </a-form-item>
              </a-col>
            </a-row>
            <!-- 部门级别 departLevel -->
            <a-row :gutter="24">
              <a-col :span="24">
                <a-form-item
                  label="部门级别"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                >
                  <a-select v-decorator="['category', {}]">
                    <a-select-option v-for="item in stateList" :value="item.key" :key="item.key">
                      {{ item.lable }}
                    </a-select-option>
                  </a-select>
                  <!-- <a-input v-decorator="['departLevel', {}]" /> -->
                </a-form-item>
              </a-col>
            </a-row>
          </a-col>
          <a-col :span="10">
            <a-row :gutter="24">
              <a-col :span="24">
                <a-form-item
                  label="排序号"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                >
                  <a-input v-decorator="['sortNum', {}]" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="24">
                <a-form-item
                  label="其他信息"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                >
                  <a-textarea :rows="4" v-decorator="['departDisc', {}]" />
                </a-form-item>
              </a-col>
            </a-row>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import { saveDepartInfo, getDepartInfoByPid } from '../depart'

export default {
  name: 'DepartModal',
  props: {
    // theOrgPid: { type: String, default: '' },
    // visible: { type: Boolean, default: false }
  },
  data () {
    return {
      // form: this.$form.createForm(this),
      stateList: [
        { lable: '123', key: 'abc' },
        { lable: '1234', key: 'abcd' }
      ],
      dateFormat: 'YYYY-MM-DD',
      alertVisable: false, // 错误提示框
      editModel: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      confirmLoading: false,
      department: {
        sysSeq: 0,
        pid: '',
        parentDepartPid: ''
      },
      visible: false
    }
  },
  beforeCreate () {
    this.form = this.$form.createForm(this)
    console.log('form::', this.form)
  },
  created () {
  },
  methods: {
    // 搜索人员
    onSearch (value) {
      this.departmentInfoEdit = false
      this.editModel = false
    },
    // 得到时间控件时间
    onChangeDate1 (date, dateString) {
      this.person.personBirthday = dateString
    },
    getBirthdayDate () {
      if (this.departmentMemberInfo.personBirthday) {
        // return moment(this.departmentMemberInfo.personBirthday, 'YYYY-MM-DD')
      } else {
        // return null
      }
    },
    // 关闭提示
    alertOnClose () {
      this.alertVisable = false
    },
    showAddModal (parentDeptPid) {
      this.department = {
        sysSeq: 0,
        pid: '',
        parentDepartPid: parentDeptPid,
        sortNum: 99
      }
      this.visible = true
    },
    showEditModal (pid) {
      console.log(pid)
      if (pid) {
        this.confirmLoading = true
        getDepartInfoByPid(pid, {})
          .then(res => {
            if (res.code === 'C1') {
              this.department.sysSeq = res.data.sysSeq
              this.department.pid = res.data.pid
              this.department.parentDepartPid = res.data.parentDepartPid
              this.form.setFieldsValue(res.data)
              this.confirmLoading = false
            }
          })
      }
      this.visible = true
    },
    close () {
      this.$emit('close')
      this.visible = false
    },
    handleOk () {
      const _this = this
      // 触发表单验证
      this.form.validateFields((err, values) => {
        // 验证表单没错误
        if (!err) {
          console.log('form values', values)
          _this.confirmLoading = true
          new Promise((resolve) => {
            resolve(saveDepartInfo(Object.assign(_this.department, values), {}))
          }).then((res) => {
            if (res.code === 'C1') {
              _this.$message.success('保存成功')
              _this.close()
            } else {
              _this.alertVisable = true
            }
            // Do something
            _this.confirmLoading = false
            // _this.$emit('ok')
          }).catch(() => {
            // Do something
          }).finally(() => {
            _this.departmentMemberInfo = {
              sysSeq: 0,
              pid: '' // 主键
            }
          })
        }
      })
    },
    handleCancel () {
      this.close()
    }

  }
}
</script>

<style>
  .avatar-uploader > .ant-upload {
    width: 200px;
    height: 200px;
  }
  .ant-upload-select-picture-card i {
    font-size: 32px;
    color: #999;
  }

  .ant-upload-select-picture-card .ant-upload-text {
    margin-top: 8px;
    color: #666;
  }
</style>
